<template>
  <div class="big-box">
    <stat></stat>
    <!-- 头部 -->
    <!-- @click="goFn()" -->
    <div class="header">
      <div class="h-left">
        <div class="change-list">
          <div
            class="menuTab-name"
            v-for="(item, index) in changeList"
            :key="index"
            @click="changePageAct(item)"
            :class="{ 'active-item': selectedIndex === item.act }"
          >
            {{ item.name }}
          </div>

          <!-- <div class="menuTab-name" @click="changePageAct(4)">执法情况</div>
          <div class="menuTab-name" @click="changePageAct(5)">攻坚整治1</div> -->
        </div>
      </div>
      <div class="h-center">
        <div class="title">村民经营性自建房消防安全排查治理</div>
      </div>
      <div class="h-right">
        <div class="menuTab-name main-btn" @click="goBack()">首页</div>
        <div class="time">
          <img src="@/assets/bigScreen/time.png" alt="" />
          <div class="date">{{ dates }}</div>
        </div>
      </div>
    </div>
    <!-- 主题内容 -->
    <div class="content">
      <BaseInfo v-if="pageAct == 1"></BaseInfo>
      <DangerCondition v-else-if="pageAct == 2"></DangerCondition>
      <AttackImprove v-else-if="pageAct == 3"></AttackImprove>
      <!-- <scientificResearch v-if="pageAct == 1"></scientificResearch> -->
      <!-- <projectIncubation v-else-if="pageAct == 2"></projectIncubation> -->
      <!-- <achievement v-else-if="pageAct == 3"></achievement> -->
      <capitalOperation v-else-if="pageAct == 4"></capitalOperation>
      <intellectualProperty v-else-if="pageAct == 5"></intellectualProperty>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import stat from './component/childComponent/stat.vue'
import { areaTypeMapList } from '../bigScreen/areaTypeMap.js'
import BaseInfo from './components/baseInfo/index.vue'
import DangerCondition from './components/dangerCondition/index.vue'
import AttackImprove from './components/attackImprove/index.vue'
//
import scientificResearch from './component/scientificResearch/scientificResearch.vue'
import projectIncubation from './component/projectIncubation/projectIncubation.vue'
import intellectualProperty from './component/intellectualProperty/indexPages.vue'
import achievement from './component/achievement/indexPages.vue'
import capitalOperation from './component/capitalOperation/capitalOperation.vue'

const router = useRouter()
const pageAct = ref(1)
const dates = ref('')
const route = useRoute()
//判断时间是否为个位数，如果时间为个位数就在时间之前补上一个“0”
const check = (val) => {
  if (val < 10) {
    return '0' + val
  } else {
    return val
  }
}

const gotoScreen = (act) => {
  router.push({
    path: '/bigScreen',
    query: {
      act: act,
    },
  })
}
const gotoHome = (act) => {
  router.push({
    path: '/index',
  })
}
const changeList = ref([
  {
    name: '房主自查',
    act: 1,
  },
  {
    name: '村级检查',
    act: 2,
  },
  {
    name: '攻坚整治',
    act: 3,
  },
])
const selectedIndex = ref(null)
const changePageAct = (params) => {
  pageAct.value = params.act
  selectedIndex.value = params.act
  router.replace({
    path: '/bigScreen',
    query: {
      act: params.act,
    },
  })
}

const goBack = () => {
  router.push('/index')
}

const displayTime = () => {
  //获取系统当前的年、月、日、小时、分钟、毫秒
  let date = new Date()
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  let hour = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()
  dates.value = `${year}年${month}月${day}日 ${check(hour)}:${check(
    minutes
  )}:${check(seconds)}`
}
//每隔1秒调用一次displayTime函数
const start = () => {
  setInterval(() => {
    displayTime()
  }, 1000) //单位是毫秒
}
onMounted(() => {
  start()
  if (route.query.act) {
    pageAct.value = route.query.act
    selectedIndex.value = Number(route.query.act)
  }
})
</script>

<style scoped="scoped" lang="scss">
@font-face {
  font-family: 'ffa';
  src: url(../../assets/bigScreen/fonts/DS-DIGIB.TTF);
}
ul,
li {
  list-style: none;
}
.totalBox {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 95%;
  height: 5rem;
  border: 1px solid #02325a;
  background: rgba(2, 21, 54, 0.6);
  border-radius: 5px;

  .totalBox-left {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 40%;
    height: 100%;
    border-right: 1px solid #02325a;
    padding-left: 2rem;

    .totalBox-left-icon {
      width: 2rem;
      height: 2rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .totalBox-left-text {
      font-size: 1.8rem;
      color: #00eefd;
      margin-left: 1rem;
      margin-top: 0.5rem;
    }
  }

  .totlBox-right {
    display: flex;
    justify-content: right;
    width: 60%;
    padding: 0.5rem;

    .numberBox {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 4rem;
      .number {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 100%;
        font-size: 3.2rem;
        border-radius: 0.5rem;
        text-align: center;
        font-family: 'ffa';
        background: #052557;
        margin-left: 0.5rem;
      }
    }
  }
}

.big-box {
  // background-color: #e7250c;
  background-color: #071c3b;
  height: 100vh;
  overflow: hidden;
  .header {
    // text-align: center;
    position: relative;
    height: 11.5rem;
    // border: 1px solid red;
    background-image: url('@/assets/bigScreen1/header.png');
    background-repeat: no-repeat;
    background-size: 100% 40%;
    display: flex;
    justify-content: space-between;
    .h-left {
      width: 30%;
      height: 100%;
      // border: 1px solid sandybrown;
      display: flex;
      align-items: center;

      .change-list {
        width: 100%;
        height: 2rem;
        // height: 40px;
        padding: 0 2rem;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        font-size: 1vw;
        .menuTab-name {
          width: 9rem;
          height: 4rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url('@/assets/bigScreen/menu-tab.png') no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
    }
    .h-center {
      width: 30%;
      height: 100%;
      // border: 1px solid sandybrown;
      line-height: 8rem;
      .title {
        color: #23b9eb;
        text-align: center;
        font-size: 1.8vw;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-weight: bold;
      }
    }
    .h-right {
      width: 30%;
      height: 100%;
      // border: 1px solid sandybrown;
      display: flex;
      align-items: center;
      justify-content: flex-end;
       margin-top: 1rem;
      .main-btn{
        // border: 1px solid red;
        // line-height: 7rem;
        margin-right: 2rem;
        font-size: 1vw;
      }
      .time {
        width: 50%;
        // border: 1px solid red;
        // margin-top: 1rem;
        line-height: 4rem;
        font-size: 0.9vw;
        height: 4rem;
        display: flex;
        .date {
          margin-left: 2rem;
        }
      }
    }
  }
  .content {
    height: calc(100vh - 14.2rem);
    // padding: 0 1.6rem 2rem 1.6rem;
    // border: 1px solid red;
    .box-con {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      // border: 1px solid seagreen;
      .con-main {
        width: calc((100% - 3rem) / 4);
        height: calc((100% - 2rem) / 2.9);
        margin-top: 1.5rem;
        // border: 1px solid red;
        .main-box {
          position: relative;
          height: calc(100% - 4.5rem);
          // background-image: url('../../../assets/bigScreen/square-bg.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          border: 1px solid #07294c;
          .resetBox {
            position: absolute;
            top: 0;
            right: 0;
            width: 9rem;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url('../../assets/bigScreen/menu-tab.png') no-repeat;
            background-size: 100% 100%;
            color: #ffffff;
            cursor: pointer;
          }
          .ages-box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 1rem;
            height: calc(100% - 7rem);
            margin-top: 1rem;
            .ages-box-item {
              width: 33.3%;
              height: 100%;
              background: url('../../assets/bigScreen/achievement1.png');
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% 100%;
              text-align: center;
              // max-height: 12rem;
              h6 {
                font-size: 4rem;
                font-weight: bold;
                color: #00e0fc;
              }
              img {
                width: 15rem;
                height: 10rem;
              }
            }
            .ages-box-item:nth-child(2) {
              background: url('../../assets/bigScreen/achievement2.png');
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% 100%;
            }
            .ages-box-item:nth-child(3) {
              background: url('../../assets/bigScreen/achievement3.png');
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% 100%;
            }
          }
          .titleSmall {
            padding: 2rem;
            div {
              border-left: #00e6ff 0.3rem solid;
              padding-left: 1rem;
              color: #fff;
              line-height: 1;
            }
          }
          .num-box {
            padding: 1rem 2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 100%;
            box-sizing: border-box;
            .num-li {
              background: #021536;
              box-sizing: border-box;
              border: 0.1rem solid #02325a;
              border-radius: 0.6rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-left: 1rem;
              padding-right: 0;
              .num-li-l {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 2rem;
                font-weight: normal;
                line-height: 2rem;
                text-align: center;
                display: flex;
                align-items: center;
                letter-spacing: 0;
                color: #ffffff;
                padding: 1rem 0;

                img {
                  width: 8rem;
                  height: 8rem;
                  margin-right: 1.5rem;
                }
              }
            }
          }
          .ct-numk {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .ct-numk-t {
              padding: 1rem 2rem;
              h5 {
                font-size: 1.6rem;
                font-weight: 500;
                line-height: 2.5rem;
                letter-spacing: 0;
                color: #ffffff;
                padding-left: 0.8rem;
                border-left: 0.3rem solid #02e1e2;
              }
              .ct-numk-con {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .ctnumk-li {
                  background-image: url('../../assets/bigScreen/ctnum-bgimg.png');
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  width: 18rem;
                  height: 10rem;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  .ctnum {
                    display: flex;
                    justify-content: center;
                    color: #ffdd03;
                    div {
                      font-size: 3rem;
                      font-weight: normal;
                      line-height: 3.2rem;
                      letter-spacing: 0;
                      background-image: url('../../assets/bigScreen/ctnum-bg1.png');
                      background-size: 100% 100%;
                      background-repeat: no-repeat;
                      width: 2.4rem;
                      height: 3.7rem;
                      line-height: 3.7rem;
                      text-align: center;
                      margin: 0 0.05rem;
                    }
                  }
                  .cttit {
                    font-size: 1.2rem;
                    font-weight: normal;
                    line-height: 1.7rem;
                    text-align: center;
                    letter-spacing: 0;
                    color: #ffffff;
                  }
                }
              }
            }
          }
          .lb-box {
            display: flex;
            flex-wrap: wrap;
            padding: 1rem 0;
            height: 100%;

            .lb-box-l {
              width: 50%;
              height: 100%;
              animation: breathing 3s ease-in-out infinite;

              .lbbox-l-t {
                width: 13.9rem;
                height: 14.4rem;
                background-image: url('../../assets/bigScreen/lbtl-bg.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                color: #fff;
                font-size: 2.4rem;
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin: auto;

                p {
                  margin: 0;
                  font-size: 1.4rem;
                  font-weight: normal;
                  line-height: 2.4rem;
                  text-align: center;
                  letter-spacing: 0;
                  color: #d0deee;
                }
              }
              .lbbox-r-t {
                background-image: url('../../assets/bigScreen/lbtr-bg.png');
              }
              .lbbox-l-b {
                padding: 0 1rem 0 2rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-top: 1rem;
                height: calc(100% - 14.4rem - 1rem);

                .lbbox-li {
                  display: flex;
                  align-items: center;
                  margin-bottom: 0.7rem;
                  padding: 0.7rem;
                  background: #061d44;
                  position: relative;

                  .lbbox-imgk {
                    width: 6rem;
                    height: 6.5rem;
                    position: relative;

                    img {
                      width: 100%;
                      height: 100%;
                    }

                    div {
                      position: absolute;
                      left: 0;
                      bottom: 0;
                      width: 100%;
                      height: 2rem;
                      font-size: 1rem;
                      font-weight: normal;
                      letter-spacing: 0;
                      color: #ffffff;
                      text-align: center;
                      line-height: 2rem;
                      background: rgba(91, 198, 200, 0.37);
                    }
                  }

                  .lbbox-textk {
                    margin-left: 1rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    h6 {
                      font-size: 1.6rem;
                      font-weight: normal;
                      letter-spacing: 0;
                      color: #00e6ff;
                      margin: 0;
                    }

                    div {
                      font-size: 1.2rem;
                      font-weight: normal;
                      letter-spacing: 0;
                      color: rgba(255, 255, 255, 0.54);
                    }
                  }

                  .tags {
                    font-size: 1rem;
                    font-weight: normal;
                    letter-spacing: 0;
                    color: #02fbfd;
                    padding: 0.2rem 0.5rem;
                    border-radius: 0.2rem;
                    background: rgba(38, 77, 112, 0.37);
                    border: 0.1rem solid rgba(2, 251, 253, 0.23);
                    position: absolute;
                    top: 0.8rem;
                    right: 0.8rem;
                  }
                }
              }
            }
          }
          .cb-box {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 100%;
            .cb-box-t {
              display: flex;
              justify-content: space-around;
              align-items: center;
              .cbbox-t-box {
                h6 {
                  margin: 0;
                  font-size: 1.6rem;
                  font-weight: normal;
                  line-height: 2.2rem;
                  letter-spacing: 0;
                  color: #ffffff;
                  text-align: center;
                }
                .cbbox-t-numk {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-top: 1rem;
                  color: #ffdd03;

                  div {
                    width: 3.9rem;
                    height: 5rem;
                    background: linear-gradient(
                      0deg,
                      #021536 10%,
                      rgba(2, 21, 54, 0.26) 100%
                    );
                    box-sizing: border-box;
                    border: 1px solid;
                    border-image: linear-gradient(
                        180deg,
                        #4192d9 2%,
                        rgba(65, 146, 217, 0.3) 34%,
                        rgba(65, 146, 217, 0.3) 68%,
                        #4192d9 100%
                      )
                      1;
                    box-shadow: inset 0px -1px 3px 0.5px rgba(132, 160, 201, 0.44),
                      inset 0px 5px 20px 0.5px rgba(43, 46, 52, 0.56);
                    margin: 0 0.3rem;
                    text-align: center;
                    line-height: 5rem;
                    font-size: 3rem;
                    font-weight: normal;
                    letter-spacing: 0;
                    text-shadow: 0 0.4rem 1rem 0 rgba(255, 221, 3, 0.44);
                  }
                }
              }
            }
            .cb-box-b {
              padding: 1rem;
              h5 {
                font-size: 1.6rem;
                font-weight: 500;
                line-height: 2.5rem;
                letter-spacing: 0;
                color: #ffffff;
                padding-left: 0.8rem;
                border-left: 0.3rem solid #02e1e2;
                margin-bottom: 0;
              }
              .cbbox-b-con {
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
                .cbbox-b-conli {
                  width: calc((100% - 4rem) / 3);
                  h6 {
                    display: flex;
                    align-items: center;
                    margin: 0;
                    img {
                      width: 2.1rem;
                      height: 2.1rem;
                    }
                    span {
                      font-size: 1.4rem;
                      font-weight: normal;
                      letter-spacing: 0;
                      color: #00e6ff;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }
                  }
                  .cbbox-b-conli-imgk {
                    margin-top: 1.2rem;
                    height: 9rem;
                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                  p {
                    font-size: 1.2rem;
                    font-weight: normal;
                    letter-spacing: 0;
                    color: rgba(255, 255, 255, 0.54);
                    margin-top: 0.7rem;
                    margin-bottom: 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                }
              }
            }
          }
          .project-box {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            padding: 0.5rem 0;
            .project-item {
              display: flex;
              justify-content: left;
              align-items: center;
              width: 50%;
              height: 11rem;
              background: url('../../assets/bigScreen/project-item-bg.png')
                no-repeat;
              background-size: 100% 100%;
              background-position: center;
              padding: 0 3rem;
              .item-left {
                width: 6rem;
                height: 6rem;
                img {
                  width: 100%;
                  height: 100%;
                  animation: fadenum 2s infinite;
                }
              }
              @keyframes fadenum {
                100% {
                  transform: rotate(360deg);
                }
              }
              .item-right {
                margin-left: 1rem;
                .right-title {
                  font-size: 1.4rem;
                  color: #ffffff;
                }
                .right-number {
                  font-size: 2.2rem;
                  color: #ffdd03;
                }
              }
            }
          }
          .declar-box {
            position: relative;
            width: 100%;
            height: 100%;
            background: url('../../assets/bigScreen/declar-bg.png') no-repeat;
            background-size: 100% 100%;
            background-position: center;
            animation: breathing 3s ease-in-out infinite;
            .declarItem1 {
              position: absolute;
              top: 2rem;
              left: 1rem;
            }
            .declarItem2 {
              position: absolute;
              top: 2rem;
              right: 2rem;
            }
            .declarItem3 {
              position: absolute;
              bottom: 1rem;
              left: 1rem;
            }
            .declarItem4 {
              position: absolute;
              bottom: 1rem;
              right: 2rem;
            }
          }
          @keyframes breathing {
            0% {
              transform: scale(1);
            }
            50% {
              transform: scale(0.9);
            }
            100% {
              transform: scale(1);
            }
          }
          .table-box {
            padding-top: 0.1rem;
            .table-head-box {
              display: flex;
              justify-content: space-between;
              width: 100%;
              height: 4rem;
              background: rgba(5, 35, 86, 0.42);

              .head-item {
                flex: 1;
                font-size: 1.4rem;
                color: #ffffff;
                text-align: center;
                line-height: 4rem;
              }
            }
            .table-body-box {
              display: flex;
              justify-content: space-between;
              width: 100%;
              height: 3.8rem;
              .body-item {
                flex: 1;
                font-size: 1.4rem;
                color: #9e9e9e;
                text-align: center;
                line-height: 3.8rem;
              }
            }
          }
        }
      }
    }
  }
}
.h4s {
  height: 4.5rem;
  line-height: 4.5rem;
  background-image: url('../../assets/bigScreen/title-bg4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem 0.3rem 4.7rem;
  box-sizing: border-box;

  .tit-l {
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

    span {
      font-size: 1.4rem;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.62);
      margin-left: 1.8rem;
    }
  }
  .tit-r {
    display: flex;
    align-items: center;
  }
  .more {
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
    cursor: pointer;
  }
}
.h4s-ts {
  background-image: url('../../assets/bigScreen/title-bg31.png');
}
.h4s-ts2 {
  background-image: url('../../assets/bigScreen/title-bg32.png');
}
.menuTab-name {
  width: 9rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/bigScreen/menu-tab.png') no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.active-item {
  color: #01e7f6;
}
</style>
